<!--
 * @Description: 
 * @Author: Leequik
 * @Date: 2025-06-13 20:09:27
 * @LastEditTime: 2025-07-02 06:35:41
 * @LastEditors: Leequik
-->

<template>
    <div class="demo"> 
        <button @click="getLove">获取一句土味情话</button>
        <button @click="getLove2">获取</button>
        <ul>
            <li v-for="talk in loveStore.talkList" :key="talk.id">{{talk.content}}</li>
        </ul>
    </div>
    
</template>
<script lang="ts" setup>
import { reactive ,getCurrentInstance} from 'vue'
//引入安装nanoid  npm install -i nanoid
import { nanoid } from 'nanoid'
//引入store(pinia的状态管理仓库)
import { useLoveStore } from '../../store/love'

const loveStore = useLoveStore();
const { proxy } = getCurrentInstance();
async function getLove(){
    
    //存在cors跨域问题
    //连续解构赋值加重名名
    /*
    let {data:{content:content}} = await fetch('https://api.uomg.com/api/rand.qinghua?format=json')
    let obj = {id: nanoid(), content}
    let res = await fetch('https://api.uomg.com/api/rand.qinghua?format=json',{
        method: 'GET',
        mode: 'cors',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    */
    //let res = await fetch('/love');
    proxy.$axios.get('/love').then(res=>{ 
        console.log(res.data);
        let obj = {id: nanoid(), content: res.data.content};
        //talkList.push(obj);
        loveStore.talkList.unshift(obj);
            
    }).catch(error=>{
        console.log(error);
    })

}

function getLove2(){
    loveStore.getTalkList()
}


</script>

<style>
    .demo {
        background-color: pink;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
        width: 550px;
        margin: 10px;
    }
    button  { 
        margin: 5px 5px;

    }

</style>